<template>
    <div class="prize-draw">
        <el-row type="flex" justify="space-between" class="detail-header">
            <el-col :span="8">
                <label class="header-label">场景功能：</label>
                <span class="header-name">智汇抽奖</span>
            </el-col>
            <el-col :span="16" style="text-align:right;">
                <label class="header-label">场景页名称：</label>
                <el-input style="width: 260px" placeholder="抽奖环节" v-model="pageName" clearable></el-input>
                <el-button type="primary">修改</el-button>
            </el-col>
        </el-row>
        <el-tabs type="border-card" v-model="currentTab" @tab-click="tabClick">
            <el-tab-pane v-for="(tab, $index) in tabs" :key="$index" :name="tab.alias">
                <span slot="label">
                    <i class="el-icon-date"></i>
                    {{tab.name}}
                </span>
                <keep-alive v-if="tab.alias === currentTab && tab.alias !== 'promise'">
                    <component
                        v-bind:is="tab.relationComponent"
                        :pageName="pageName"
                        @initData="setData"
                        :pageId="pageId"
                        :enablePreset="enablePreset"
                    ></component>
                </keep-alive>
            </el-tab-pane>
        </el-tabs>
   
    </div>
</template>

<script>
import prizeBaseSetting from '../viewPart/prizeBaseSetting';
import prizePreSetting from '../viewPart/prizePreSetting';

export default {
    name: 'prizeDraw',
    components: {
        prizeBaseSetting,
        prizePreSetting,
     
    },
    data: () => {
        return {
            pageId: null,
            pageName: '',
            enablePreset: false,
            currentTab: 'base',
            tabs: [
                {
                    name: '基本设置',
                    alias: 'base',
                    relationComponent: 'prizeBaseSetting',
                },
                {
                    name: '预设名单',
                    alias: 'pre',
                    relationComponent: 'prizePreSetting',
                },
                {
                    name: '奖励兑现',
                    alias: 'promise',
                    relationComponent: 'prizePromise',
                },
            ],
        
        };
    },
    created() {
        var {path} = this.$route;
        this.pageId = this.$route.path.split("/")[2].split("_")[0];
        // 当添加抽奖页时，不显示其他tab
        if (('' + path).indexOf('add') > -1) {
            this.tabs = this.tabs.slice(0, 1);
        }
    },
    mounted() {
        this.pageName = this.$route.name + '';
    },
    methods: {
        
        tabClick(tab, event) {
            // 奖励兑现跳转至指定页面
            if (tab.name === 'promise') {
                this.$router.push({
                    path: '/sceneManage/prizeExchange',
                    query: {
                        sceneId: this.$route.query.sceneId,
                    },
                });
            }
        },

        setData(name, enablePreset) {
            this.pageName = name;
            this.enablePreset = enablePreset;
        },
    },
};
</script>

<style lang="scss">
.prize-draw {
    @include main-content;
    // width: 100%;
    // height: 100%;

    .detail-header {
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .header-label {
        font-weight: normal;
        font-size: 14px;
        margin-right: 10px;
    }

    .header-name {
        font-size: 24px;
    }
}
</style>